<template>
  <view class="container">

    <block v-for="(item,index) in productList" :key="index">
      <view class="product-item">
        <view class="protuct-item-cover">
          <image :src="item.img" mode=""></image>
        </view>
        <view class="product-item-title">
          <text>{{item.title}}</text>
        </view>

        <view class="product-item-detail">
          <view class="">{{item.price /100}}元</view>
          <view style="padding-left: 20upx;">{{item.seller_count}}</view>
          <view class="operation">
            <view class="">
              <button type="primary" size="mini">购买</button>
            </view>
          </view>
        </view>
      </view>
      <view class="gap"></view>
    </block>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        productList: [],
        page:1,
      }
    },
    onLoad() {
      let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${this.page}&shop_id=682731`;
      console.log(url)
      uni.request({
      	url:url,
        success: (response) => {
          console.log(JSON.stringify(response.data.shop_products))
          this.productList=response.data.shop_products;        	
        }
      })
    },
    methods: {

    }
  }
</script>

<style>
  page {
    display: flex;
  }

  view {
    display: flex;
    flex-direction: row;

    /* border: solid 1upx;
    margin: 10upx; */
  }

  page {
    min-height: 100%;
  }

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .column {
    display: flex;
    flex-direction: column;
  }

  .gap {
    background-color: #eeeeee;
    height: 20upx;
    width: 100%;
  }

  .product-item {
    display: flex;
    flex-direction: column;

  }

  .protuct-item-cover {
    flex-direction: row;
    height: 375upx;
    flex: 1;

  }

  .protuct-item-cover image {
    width: 100%;
    height: 100%;
  }

  .product-item-title {
    font-size: 32upx;
    font-weight: bold;
    padding: 10upx;
  }

  .product-item-detail {
    align-items: center;
    padding-left: 10upx;
    padding-right: 10upx;
    padding-bottom: 20upx;
  }

  .product-item-detail>.operation {
    justify-content: flex-end;
    flex: 1;
  }
</style>
